<template>
  <div class="kw-wrap">
    <detail-title :title="'评论关键字'" :state="'icon-haoping'"></detail-title>
    <div class="kw-content">
      <span class="kw-info" v-for="(item,index) in this.keyword" :key="index">
        {{item}}
      </span>
    </div>
  </div>
</template>

<script>
  import DetailTitle from './Title.vue';
  export default {
    name: 'CommentKeyword',
    props: {
      keyword: Array
    },
    components: {
      'detail-title': DetailTitle
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .kw-wrap {
    box-sizing: border-box;

    .kw-content {
      display: flex;
      flex-wrap: wrap;
      padding: .16rem;
      box-sizing: border-box;

      .kw-info {
        padding: .03rem;
        font-size: .14rem;
        margin: .05rem .05rem;
        color: $defaultGreen;
        border: 1px solid $defaultGreen;
        border-radius: .05rem;
        box-sizing: border-box;
      }
    }
  }
</style>
